<template>
  <div class="contacts-container">
    <div class="contacts-header">
      <h2>私信</h2>
      <button class="new-chat-btn" @click="startNewChat">+ 新聊天</button>
    </div>

    <div class="search-contacts">
      <input v-model="searchQuery" placeholder="搜索联系人..." @input="filterContacts">
    </div>

    <div class="contacts-list">
      <div
          v-for="contact in filteredContacts"
          :key="contact.id"
          class="contact-item"
          :class="{ active: activeContact === contact.id }"
          @click="selectContact(contact.id)"
      >
        <div class="contact-avatar">
          <img :src="contact.avatar" :alt="contact.name" class="avatar">
        </div>
        <div class="contact-info">
          <div class="contact-name">{{ contact.name }}</div>
          <div class="contact-preview">{{ contact.lastMessage }}</div>
        </div>
        <div class="contact-meta">
          <div>{{ formatTime(contact.lastMessageTime) }}</div>
          <div v-if="contact.unreadCount > 0" class="unread-count">
            {{ contact.unreadCount }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    contacts: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchQuery: '',
      filteredContacts: [],
      activeContact: null
    };
  },
  created() {
    this.filteredContacts = [...this.contacts];
  },
  methods: {
    formatTime(date) {
      if (!date) return '';
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    filterContacts() {
      if (!this.searchQuery) {
        this.filteredContacts = [...this.contacts];
        return;
      }
      this.filteredContacts = this.contacts.filter(contact =>
          contact.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    selectContact(contactId) {
      this.activeContact = contactId;
      this.$emit('contact-selected', contactId);
    },
    startNewChat() {
      this.$emit('new-chat');
    }
  }
};
</script>

<style scoped>
.contacts-container {
  width: 300px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.contacts-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e6e8ec;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contacts-header h2 {
  font-size: 1.2rem;
  color: #333;
}

.new-chat-btn {
  background: #2f80ed;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.9rem;
}

.search-contacts {
  padding: 10px 20px;
  border-bottom: 1px solid #e6e8ec;
}

.search-contacts input {
  width: 100%;
  padding: 8px 15px;
  border: 1px solid #e6e8ec;
  border-radius: 20px;
  outline: none;
  font-size: 0.9rem;
}

.contacts-list {
  flex: 1;
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  transition: background 0.2s;
}

.contact-item:hover, .contact-item.active {
  background: #f5f7fa;
}

.contact-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 15px;
  overflow: hidden;
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-name {
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 0.95rem;
}

.contact-preview {
  font-size: 0.8rem;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.contact-meta {
  text-align: right;
  font-size: 0.75rem;
  color: #999;
  min-width: 60px;
}

.unread-count {
  background: #ff4d4f;
  color: white;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.7rem;
  margin-top: 5px;
}
</style>
